<template>
  <el-container>
    <el-header class="headers">
      <heads>经营概况</heads>
    </el-header>
    <el-main style="background: #f2f2f2">
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="card1">
              <el-row>
                <el-col :span="12" class="left">
                  <div>今日应收（课程）</div>
                  <div>1000</div>
                  <div>昨日应收100</div>
                </el-col>
                <el-col :span="12" class="left">
                  <div>今日应收（商城）</div>
                  <div>1000</div>
                  <div>昨日应收100</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card2">
              <el-row>
                <el-col :span="12" class="left">
                  <div>今日新增会员</div>
                  <div>1000</div>
                  <div>昨日新增会员100</div>
                </el-col>
                <el-col :span="12" class="left">
                  <div>累计会员</div>
                  <div>{{ data.data.vipCount }}</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card3">
              <el-row>
                <el-col :span="12" class="left">
                  <div>今日上课</div>
                  <div>1000</div>
                  <div>昨日上课100</div>
                </el-col>
                <el-col :span="12" class="left"> </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="tabs">
          <el-col :span="12">
            <Tabs1></Tabs1>
          </el-col>
          <el-col :span="12">
            <Tabs2></Tabs2>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <eacheartsVue></eacheartsVue>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <eachearts2Vue></eachearts2Vue>
          </el-col>
        </el-row>
      </el-main>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import Tabs1 from "../components/zch/Tabs1.vue";
import Tabs2 from "../components/zch/Tabs2.vue";
import eacheartsVue from "../components/zch/eachearts.vue";
import eachearts2Vue from "../components/zch/eachearts2.vue";
import heads from '../components/zch/HeaderView.vue'
import { findVip } from '../http/api'
import { Listdata } from '../type/data'
const data = reactive(new Listdata())
onMounted(() => {
  getVip()
})
//展示数据
//会员数量

const getVip = () => {
  findVip().then((res) => {
    data.data.vipCount = res.data.length
    console.log(data.data.vipCount);
  })
}





//今日课程
//今日私教
//今日团课
</script>
<style scoped>
.headers.el-header {
  padding: 0px;
  height: 50px;
}

.el-main {
  width: 100%;
}

.card1 {
  background: #ed5565;
  border-radius: 10px;
}

.card2 {
  background: #2096f3;
  border-radius: 10px;
}

.card3 {
  background: #0cc3aa;
  border-radius: 10px;
}

.left {
  text-align: left;
  padding: 10px;
  color: white;
  font-size: 15px;
}

.tabs {
  margin-top: 20px;
}
</style>
